<template>
<div class="wrap">
	<scroll  class="wrapper"> 
		<div class="inwrap">
			<ul>
				<li v-for="(itme,index) in  data">
					<!--订单编号-->
					<div class="serial"><span class="fl">订单编号 :  {{dindanxinxi.unpaid[index].serial}}</span><span class="fr colorred">待支付</span></div>
					<!--产品信息-->
					<div id="Product-information">
						<div class="onediv bg"  @click="check(index)"></div>
						<div class="imgmodel"><img :src="itme.imgurl" alt="" /></div>
						<div class="twodiv">
							<p>{{itme.goodsname}}</p>
							<p>规格 : {{itme.specification}}</p>
							<p><span>¥<em>{{itme.price}}</em></span><span>x{{dindanxinxi.unpaid[index].gross}}件</span></p>
						</div>
					</div>
					<!--件数及费用合算-->
					<div class="total">
						<div class="fl">应付<span class="colorred">:¥ {{dindanxinxi.unpaid[index].totalprice}}</span></div>
						<div class="fr"><span class="colorred">倒计时 : 05:00:00</span><button >去付款</button></div>
					</div>
				</li>
			</ul>
		
		</div>
	</scroll>
		<!--下方多选操作做-->
			<div class="bottomdiv" ><div class="onediv bg" @click="aftercheck()"></div><span class="fl">全选</span><button class="fr delete">删除</button></div>
</div>
</template>

<script>
	import Scroll from "../../../../base/Scroll"
	export default{
		name:"Unpaid",
		data(){
			return{
				a:false,
				data:[],
				dindanxinxi:{
					unpaid:[]
				},
				shangpinzhuangtai:[]
			}
		},
		components:{
			Scroll
		},
		props:["shangpin"],
		created:function(){
			 this.data =this.shangpin.unpaid;
			 console.log(this.data);
			 	if(this.$store.state.personInfor.length!=0){
				   var  dingdan = this.$store.state.personInfor[1].selectuser;
				   for (var i=0; i<dingdan.length;i++ ) {
				   		this.shangpinzhuangtai.push(this.$store.state.personInfor[1].selectuser[i].zhuangtai);
						var shangpinbianhao=this.$store.state.personInfor[1].selectuser[i].dingdanbianhao;
					}	
					 for (var i=0; i<dingdan.length;i++ ) {
					 	if (this.shangpinzhuangtai[i]=="待发货") {
					 		var shangpinbianhao=this.$store.state.personInfor[1].selectuser[i].dingdanbianhao;
							var shangpinshuliang=this.$store.state.personInfor[1].selectuser[i].shuliang;
							var dingdanzongjia  = this.$store.state.personInfor[1].selectuser[i].shuliang;
							this.dindanxinxi.unpaid.push({serial:shangpinbianhao,gross:shangpinshuliang,totalprice:59});
					 	}	
					}
			}
			 
			 
		},
		methods:{
			check:function  (index) {
				var onedivs = $(".onediv");
				if(this.data[index].bol){
					$(onedivs[index]).addClass("bg");
					this.data[index].bol=false;
					$(".bottomdiv .onediv").removeClass("bg");
					this.a=true;
				}else{
					$(onedivs[index]).removeClass("bg");
					this.data[index].bol=true;
					$(".bottomdiv .onediv").removeClass("bg");
					this.a=true;
				}
				console.log(onedivs[index]);
			},
			aftercheck:function () {
				var onedivs = $(".onediv");
				console.log("点击");
				if (this.a) {
					for (var i = 0; i < onedivs.length; i++) {
						$(onedivs[i]).addClass("bg");
					}
					for (var i = 0; i < onedivs.length-1; i++) {
						this.data[i].bol=false;
					}
					this.a=false
				} else{
					this.a=true
					for (var i = 0; i < onedivs.length; i++) {
						$(onedivs[i]).removeClass("bg");
					}
					for (var i = 0; i < onedivs.length-1; i++) {
					     this.data[i].bol=true;
					}
				}
				
			}
		}
	}
</script>

<style scoped>
	.wrap{
		width: 100%;
		height: 100vh;
		background: #F2F2F2;
	}
	.wrapper{
		height: 78vh;
		overflow: hidden;
	}
	.fl{
		float: left;
	}
	.fr{
		float: right;
	}
	.colorred{
		color: red;
	}
	
	.inwrap ul{
		background: white;
		margin-bottom:6.42vh ;
	}
	.inwrap ul>li>div:nth-child(n){
		width: 94.4%;
		padding:0 2.8% ;
		border-bottom:1px  solid #CCCCCC;
	}
	.serial{
		height: 2.875rem;
	}
	.serial span{
		font-size: 1.2rem;
		line-height: 2.875rem;
	}
	/*产品信息*/
	#Product-information{
		vertical-align: top;
		height: 9.583rem;
		padding-left: 10.438%;
		position: relative;
	}
	.imgmodel{
		width: 4.792rem;
		height:4.792rem ;
		margin: 2.396rem;
		display: inline-block;
		text-align: center;
		vertical-align: 2rem;
	}
	#Product-information img{
		height: 100%;
	}
	.onediv{
		position: absolute;
		top: 50%;
		margin-top: -0.8rem;
		left: 2.8%;
		width: 1.4rem;
		height: 1.4rem;
		background: #F2F2F2;
		border: 1px solid #CCCCCC; 
		border-radius: 50%;
	}
	.bg{
		background: url(../../../assets/G-img/对号.png) no-repeat;
		background-size: 100%;
	}
	#Product-information .twodiv{
		display: inline-block;
		width: 41.667%;
		height: 100%;
		position: relative;
        top:-1.354rem ;		
	}
	.twodiv>p:nth-child(1){
		font-size:1.3rem ;
		padding-top: 1rem;
		color: #4d4d4d;
	}
	.twodiv>p:nth-child(2){
		font-size:1.2rem ;
		color: #666666;
	}
	.twodiv>p:nth-child(3){
		padding-top: 2.396rem;
		font-size:1.2rem ;
		color: #666666;
	}
	.twodiv>p:nth-child(3)>span:nth-child(1){
		color: red;
	}
	.twodiv>p:nth-child(3)>span:nth-child(2){
		margin-left: 2rem;
		font-weight: 200;
	}
	.total{
		height: 4.217rem;
		line-height: 4.217rem;
		font-size: 1.3rem;
	}
	.total div{
		display: inline-block;
	}
	.total button{
		outline: none;
		font-size: 1.3rem;
		background: red;
		border-radius:1rem ;
		width: 5rem;
		margin-left: 1rem;
		color: white;
		font-weight: 200;
		border: 0;
	}
	.bottomdiv{
		border-top:1px  solid #CCCCCC ;
		width: 88.4%;
		padding: 0 2.8% 0 8.6%;
		height: 6.42vh;
		line-height: 6.42vh;
		background: white;
		position: fixed;
		bottom: 0;
		font-size: 1.3rem;
	}
	.bottomdiv .delete{
		background: red;
		color: white;
		width: 5rem;
		border: 0;
		border-radius: 1rem;
		font-size: 1.3rem;
		position: relative;
		top: 50%;
		margin-top:-1.5vh;
		font-weight:200 ;
		outline: none;
	}
	
</style>